<template>
  <div class="app-container">
    <el-card>
      <p>桂皓</p>
      <el-row type="flex" justify="end">
        <el-col :span="24" style="text-align:right">
          <el-button type="success" icon="el-icon-edit" size="mini" @click="showDialog('add')">添加菜单</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <tree-table :data="menuList" :columns="columns" :treeStructure="true" :listLoading="isLoading" @handleUpdate="handleUpdate" @removeUser="handleRemove" border></tree-table>
        </el-col>
      </el-row>
    </el-card>
    <!-- 新增菜单对话框 -->
    <menu-add :text="text" :pageTitle="pageTitle" ref="addDialogRef" @handleCloseModal="handleClose" @newDataes="loadMenusList"></menu-add>
  </div>
</template>

<script>
// 菜单列表
import { list, remove } from '@/api/base/menus'
// 树表组件
import treeTable from '@/components/TreeTable/index'
// 创建菜单
import menuAdd from '../components/menu-add'
// 权限组列表
// import { simple } from '@/api/base/permissions'
export default {
  data () {
    return {
      isLoading: false,
      menuList: [],
      columns: [
        {
          text: '标题',
          value: 'title',
          width: 260,
          render: (h, params) => {
            return h('div', [
              h('i', {
                class: params.row.icon,
                style: {
                  marginLeft: `${20 * params.row._level}px`,
                  marginRight: '5px',
                  fontSize: '16px'
                }
              }),
              h('span', params.row.title)
            ])
          }
        },
        {
          text: '权限点代码',
          value: 'code'
        }
      ],
      type: 'add',
      text: '创建', // 创建、编辑文本
      pageTitle: '菜单'// 弹窗标题
    }
  },
  components: {
    treeTable,
    menuAdd
  },
  created () {
    this.loadMenusList()
  },

  methods: {
    async loadMenusList (params) {
      this.isLoading = true
      const { data: res } = await list(params)
      this.menuList = res
      this.isLoading = false
    },
    // 显示创建或编辑菜单对话框
    showDialog (type, id) {
      this.text = type === 'add' ? '创建' : '编辑'
      this.$refs.addDialogRef.dialogFormV()
      if (id) {
        this.$refs.addDialogRef.hanldeEditForm(id)
      }
    },
    // 编辑
    handleUpdate (row) {
      this.showDialog('edit', row.id)
    },
    // 删除
    handleRemove (id) {
      this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { status } = await remove({ id })
        if (status !== 200) return this.$message.error('删除失败')
        this.loadMenusList()
        this.$message.success('删除成功!')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 关闭对话框
    handleClose () {
      // 重置表单且隐藏弹窗
      this.$refs.addDialogRef.handleResetForm()
      this.$refs.addDialogRef.dialogFormH()
    }
  }
}
</script>

<style scoped lang='less'>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
